<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${fileName}">图片预览</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <style>
        :root {
            --color-primary: #165dff;
            --color-text-1: #ffffff;
            --color-bg-overlay: rgba(0, 0, 0, 0.85);
            --color-toolbar-bg: rgba(255, 255, 255, 0.1);
            --color-toolbar-hover: rgba(255, 255, 255, 0.2);
        }

        body {
            margin: 0;
            padding: 0;
            background: #000;
            font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "SimSun", sans-serif;
            height: 100vh;
            overflow: hidden;
            user-select: none;
        }

        /* Header for filename */
        .header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
            z-index: 10;
            color: var(--color-text-1);
            pointer-events: none;
        }

        .header > * {
            pointer-events: auto;
        }

        .file-name {
            font-size: 14px;
            opacity: 0.9;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        .close-btn {
            cursor: pointer;
            padding: 8px;
            border-radius: 4px;
            transition: background 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-btn:hover {
            background: rgba(255,255,255,0.1);
        }

        /* Main Image Container */
        #image-container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            cursor: grab;
        }

        #image-container:active {
            cursor: grabbing;
        }

        #preview-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
            transform-origin: center center;
            user-drag: none;
            -webkit-user-drag: none;
        }

        /* Bottom Toolbar */
        .toolbar-container {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
            display: flex;
            gap: 12px;
            padding: 10px 20px;
            background: var(--color-toolbar-bg);
            backdrop-filter: blur(10px);
            border-radius: 50px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .tool-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: transparent;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            position: relative;
        }

        .tool-btn:hover {
            background: var(--color-toolbar-hover);
            transform: translateY(-2px);
        }

        .tool-btn:active {
            transform: translateY(0);
        }

        .tool-btn svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }

        /* Tooltip */
        .tool-btn::after {
            content: attr(data-title);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(-10px);
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
            margin-bottom: 8px;
        }

        .tool-btn:hover::after {
            opacity: 1;
        }

        /* Loading & Error */
        .loading-container, .error-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            color: rgba(255,255,255,0.7);
        }

        .spinner {
            width: 32px;
            height: 32px;
            border: 3px solid rgba(255,255,255,0.1);
            border-top-color: var(--color-primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 16px;
        }

        @keyframes spin { to { transform: rotate(360deg); } }

        .zoom-info {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 16px;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
            z-index: 200;
        }

        .zoom-info.show { opacity: 1; }
    </style>
</head>
<body>

<div class="header">
    <div class="file-name" th:text="${fileName}">filename.jpg</div>
    <div class="close-btn" onclick="window.close()" title="关闭">
        <svg width="24" height="24" viewBox="0 0 48 48" fill="none">
            <path d="M14 14L34 34" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M14 34L34 14" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </div>
</div>

<div id="image-container">
    <div class="loading-container" id="loading">
        <div class="spinner"></div>
        <div>加载中...</div>
    </div>

    <div id="error" class="error-container" style="display: none;">
        <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44ZM32.2426 15.7574C32.6331 15.3668 32.6331 14.7337 32.2426 14.3431C31.8521 13.9526 31.2189 13.9526 30.8284 14.3431L24 21.1716L17.1716 14.3431C16.781 13.9526 16.1479 13.9526 15.7574 14.3431C15.3668 14.7337 15.3668 15.3668 15.7574 15.7574L22.5858 22.5858L15.7574 29.4142C15.3668 29.8047 15.3668 30.4379 15.7574 30.8284C16.1479 31.2189 16.781 31.2189 17.1716 30.8284L24 24L30.8284 30.8284C31.2189 31.2189 31.8521 31.2189 32.2426 30.8284C32.6331 30.4379 32.6331 29.8047 32.2426 29.4142L25.4142 22.5858L32.2426 15.7574Z" fill="#F53F3F"/>
        </svg>
        <div style="margin-top: 10px">加载失败</div>
    </div>

    <img id="preview-image" th:src="${streamUrl}" style="display: none;">
</div>

<div class="toolbar-container">
    <button class="tool-btn" onclick="zoomIn()" data-title="放大">
        <svg viewBox="0 0 48 48"><path d="M21 38C30.3888 38 38 30.3888 38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path d="M21 15L21 27" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 21L27 21" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M33.2218 33.2218L41.7071 41.7071" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
    <button class="tool-btn" onclick="zoomOut()" data-title="缩小">
        <svg viewBox="0 0 48 48"><path d="M21 38C30.3888 38 38 30.3888 38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path d="M15 21L27 21" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M33.2218 33.2218L41.7071 41.7071" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
    <button class="tool-btn" onclick="resetZoom()" data-title="1:1">
        <svg viewBox="0 0 48 48"><path d="M30 6H42V18" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M42 6L26 22" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 42H6V30" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 42L22 26" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
    <button class="tool-btn" onclick="rotateLeft()" data-title="向左旋转">
        <svg viewBox="0 0 48 48"><path d="M12 24H42" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 24C6 33.9411 14.0589 42 24 42C33.9411 42 42 33.9411 42 24" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 24L12 18" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 24L12 30" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
    <button class="tool-btn" onclick="rotateRight()" data-title="向右旋转">
        <svg viewBox="0 0 48 48"><path d="M36 24H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M42 24L36 18" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M42 24L36 30" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
    <button class="tool-btn" onclick="toggleFullscreen()" id="fullscreen-btn" data-title="全屏">
        <svg viewBox="0 0 48 48"><path d="M33 6H42V15" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M42 33V42H33" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 42H6V33" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 15V6H15" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
</div>

<div class="zoom-info" id="zoom-info">100%</div>

<script th:inline="javascript">
    const image = document.getElementById('preview-image');
    const loading = document.getElementById('loading');
    const errorDiv = document.getElementById('error');
    const zoomInfo = document.getElementById('zoom-info');
    const container = document.getElementById('image-container');

    let scale = 1;
    let rotate = 0;
    let translateX = 0;
    let translateY = 0;

    let isDragging = false;
    let startX, startY;
    let lastTranslateX = 0;
    let lastTranslateY = 0;

    // Image Load
    image.onload = function () {
        loading.style.display = 'none';
        image.style.display = 'block';
    };

    image.onerror = function () {
        loading.style.display = 'none';
        image.style.display = 'none';
        errorDiv.style.display = 'flex';
    };

    function updateTransform() {
        image.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale}) rotate(${rotate}deg)`;
    }

    function showZoomInfo() {
        zoomInfo.textContent = Math.round(scale * 100) + '%';
        zoomInfo.classList.add('show');
        clearTimeout(window.zoomTimeout);
        window.zoomTimeout = setTimeout(() => {
            zoomInfo.classList.remove('show');
        }, 1000);
    }

    function zoomIn() {
        scale = Math.min(scale + 0.25, 5);
        updateTransform();
        showZoomInfo();
    }

    function zoomOut() {
        scale = Math.max(scale - 0.25, 0.1);
        updateTransform();
        showZoomInfo();
    }

    function resetZoom() {
        scale = 1;
        rotate = 0;
        translateX = 0;
        translateY = 0;
        lastTranslateX = 0;
        lastTranslateY = 0;
        updateTransform();
        showZoomInfo();
    }

    function rotateLeft() {
        rotate -= 90;
        updateTransform();
    }

    function rotateRight() {
        rotate += 90;
        updateTransform();
    }

    function toggleFullscreen() {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen();
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
        }
    }

    document.addEventListener('fullscreenchange', () => {
        const btn = document.getElementById('fullscreen-btn');
        const svg = btn.querySelector('svg');
        if (document.fullscreenElement) {
            btn.setAttribute('data-title', '退出全屏');
            svg.innerHTML = '<path d="M32 16H41V25" stroke="none"/><path d="M33 15L42 6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 33L6 42" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M33 33L42 42" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 15L6 6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 24m-10 0a10 10 0 1 0 20 0a10 10 0 1 0 -20 0" fill="none" stroke="none"/>';
        } else {
            btn.setAttribute('data-title', '全屏');
            svg.innerHTML = '<path d="M33 6H42V15" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M42 33V42H33" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 42H6V33" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 15V6H15" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>';
        }
    });

    // Drag Logic
    container.addEventListener('mousedown', (e) => {
        if (e.button !== 0) return; // Only left click
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
        container.style.cursor = 'grabbing';
    });

    window.addEventListener('mousemove', (e) => {
        if (!isDragging) return;
        e.preventDefault();
        const deltaX = e.clientX - startX;
        const deltaY = e.clientY - startY;

        translateX = lastTranslateX + deltaX;
        translateY = lastTranslateY + deltaY;

        updateTransform();
    });

    window.addEventListener('mouseup', () => {
        if (isDragging) {
            isDragging = false;
            lastTranslateX = translateX;
            lastTranslateY = translateY;
            container.style.cursor = 'grab';
        }
    });

    // Wheel Zoom
    container.addEventListener('wheel', (e) => {
        e.preventDefault();
        if (e.deltaY < 0) {
            zoomIn();
        } else {
            zoomOut();
        }
    }, {passive: false});

    // Keyboard
    document.addEventListener('keydown', (e) => {
        switch (e.key) {
            case '+': case '=': zoomIn(); break;
            case '-': zoomOut(); break;
            case '0': resetZoom(); break;
            case 'ArrowLeft': rotateLeft(); break;
            case 'ArrowRight': rotateRight(); break;
            case 'Escape': window.close(); break;
        }
    });

    // Disable context menu
    document.addEventListener('contextmenu', (e) => {
        e.preventDefault();
    });
</script>
</body>
</html>